<template>
    <div id="main3" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import { toRefs, reactive } from 'vue';
import axios from 'axios';
import Papa from 'papaparse';

export default {
    setup() {
        const state = reactive({
            csvdata: [],
        });

        function getcsvdata() {
            // 修改为使用public目录的正确路径
            axios.get('/csv/兼夹体质分布.csv')
                .then(response => {
                    Papa.parse(response.data, {
                        header: true,
                        skipEmptyLines: true,
                        complete: (results) => {
                            state.csvdata = results.data;
                            console.log(state.csvdata);
                        }
                    });
                })
                .catch(error => {
                    console.error('加载CSV文件失败:', error);
                });
        }

        // 在setup中调用
        getcsvdata();

        return {
            ...toRefs(state),
        }
    },

    watch: {
        csvdata(newVal) {
            if (newVal && newVal.length > 0) {
                this.initChart(); // 数据加载完成后调用 initChart
            }
        }
    },

    mounted() {
        // 移除 this.initChart()，改为在数据加载完成后调用
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById('main3');
            const myChart = echarts.init(chartDom);

            // 获取人数列的最大值
            const maxMan = Math.max(...this.csvdata.map(item => parseInt(item.人数)));

            const mapData = this.csvdata.map(item => ({
                name: item.兼夹体质类型 + " : " + item.特性,
                max: maxMan  // 使用最大值
            }));
            const valuedata = this.csvdata.map(item => parseInt(item.人数));
            console.log(valuedata); 
            const option = {
                radar: {
                    shape: 'polygon',
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(0,255,255,0.1)', 'rgba(0,128,128,0.1)'],
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 10
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0,255,255,0.3)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(0,255,255,0.5)'
                        }
                    },
                    indicator: mapData
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        lineStyle: {
                            width: 2,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#00FFFF' },
                                { offset: 1, color: '#FF00FF' }
                            ])
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: 'rgba(0,255,255,0.3)' },
                                { offset: 1, color: 'rgba(255,0,255,0.3)' }
                            ])
                        },
                        symbol: 'circle',
                        symbolSize: 8,
                        itemStyle: {
                            color: '#00FFFF',
                            borderColor: '#FF00FF',
                            borderWidth: 2,
                            shadowBlur: 10,
                            shadowColor: '#00FFFF'
                        },
                        data: [
                            {
                                value: valuedata,
                                name: 'Allocated Budget'
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            // 窗口大小变化时自动调整图表
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        }
    }
}
</script>

<style scoped>
.chart {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>